[00:00] When looking at an application's interface,your users will attempt to make sense of the screen by identifying the most important piece of information followed by understanding how that information is related with the rest of the content. Visual hierarchy is a tool you can use to ensure your screens are highlighting the right information to your users, providing an optimal experience. Visual hierarchy is the treatment and arrangement of objects in order to effectively communicate information. While there are several ways to achieve visual hierarchy and give emphasis to an object in your user interface, we'll focus on just the three primary factors today. These include size, proximity and color. Through a combination of these visual properties, you can create a visual hierarchy that will guide your users to intuitively understand which objects are more important than others as well as which they should give their attention to. One way to get an idea of your design's visual hierarchy is something called the squint test.

[01:03] This is as simple as it gets. Step back, squint your eyes at the screen and see which objects pop out most at a glance. The designs should look blurry. This is so you can get a high level grasp of the visual hierarchy on the screen and test out which objects stand out as well as see whether the overall hierarchy of the layout is working as you have intended it. Now I can't go forward without mentioning the groundwork that needs to happen before we use these visual hierarchy tools. The precursor step is determining what to highlight in the first place. On any given screen, ask yourself what will be most important to a user in accomplishing their goals. Your interface design will become a tool so focusing on specific use cases and processes is a good way to suss out which elements may need to capture more of the user's attention. So you'll need to talk to your users, discuss their work processes and rank everything by importance. Looking back to our squint test example, you'll notice that the large blue button stands out quite a bit as it does the monkey logo at the top.

[02:07] This looks like a signup form so clicking the button and understanding what you're signing up for would be very important to a user's understanding of this interface. We'd say that this passes the squint test. Once you have a clear idea on how you want the information hierarchy structured, you're ready to step into visual design. One of the most effective visual properties in establishing visual hierarchy is how big or small the object is in relation to other objects on the screen. Size is the most basic, but a key visual property that can give objects more importance than others. In this example, we have several circles placed side by side. Clearly the larger object stands out more, especially when it's larger than the surrounding objects. This is because our human eyes are attuned to finding patterns and anything that breaks the pattern will immediately draw our attention. Generally speaking, sufficient distinction in size should be enough to draw our attention.

[03:03] While this is a straightforward idea, be mindful about overusing it. You shouldn't enlarge all other objects as that can diminish the importance of all of them. Looking at the example on the left, all of the text seems to cry out for our attention which isn't really necessary. With the example on the right, only the header stands out because it's in bold which just happens to be a way to make your text larger. This approach is preferred because the title acts as an anchor of sorts for the content below it. Just remember that size is relative. If everything is large, then nothing is large. So key points for size, larger objects just stand out more and remember to only enlarge things that need to stand out. While size is useful in creating visual hierarchy, grouping similar objects and separating different objects can also help develop a visual hierarchy. The proximity of objects from one another can help reduce clutter and convey which objects are clearly related. And you can't talk about proximity without mentioning whitespace. Whitespace, also called negative space or empty space, refers to a space devoid of any visual objects or content.

[04:08] Whitespace can be useful when you want to focus the user's eye towards a certain object or content. It can also help create a break in between content and provides a resting spot for the eye which makes information easier to digest. Take a look at the grouping of these dots. The dots on the left are randomly spaced and lack any structure. The dots on the right are nicely organized and grouped using proximity and whitespace. Looking at the objects on the left, their proximity to each other makes them seem like one big object. They all seem grouped together which makes it difficult to distinguish the relationship between each object while on the right, the proximity of grouped objects are further spaced out in logical chunks which helps to establish their relationship and enhance readability. The biggest advantage of using whitespace is that you can emphasize certain objects by minimizing the clutter around them. The more whitespace around an object, the more emphasis the object will have.

[05:04] If you take a blank piece of paper and put a single dot on it, your eyes will immediately be drawn to the dot. Regardless of how small the dot is, it's isolation gives a huge emphasis. You'll notice in this example, the arrangement on the left has very little space in between each text element. The lack of space makes it difficult to focus on one specific part of the content as well as understand its relationship to the objects around it. Whereas on the right, the use of whitespace around the text creates a visual order and provides room to breathe between each group. Additionally, it provides spatial understanding of how things are related to each other. Remember, whitespace is not wasted space. Rather it's an active design property that helps enhance visual hierarchy through spatial distance between objects. When it comes to proximity, group similar objects and separate opposing objects. Whitespace provides breathing room and whitespace also actively enhances the visual hierarchy. Next we can talk about using color to enhance the visual hierarchy.

[06:03] When used sparingly, color is especially useful to convey emphasis on an object. In this example here, the orange circle stands out because it's different from the others, making it stand out from its neighbors. However, be careful not to overuse colors. Similar to size, applying the same color to all objects makes it so none of them stand out from the others. In a higher fidelity example, we have two pages. The example on the left is using orange in a lot of different areas which suggests that all of those objects are of equal importance. But because we're seeing that orange so much, none of the elements really stand out from each other. On the other hand, the page on the right only uses orange in two locations, one at the top and the other at the bottom. So this suggests that maybe there's something special about these two objects. Maybe that color coding suggests they perform similar actions or have some other shared commonality. It's also important to consider the right combination of colors to create visual hierarchy.

[07:03] The more our color contrasts with its surroundings, the more emphasis it will have. In this example, the right layout clearly draws more attention. Our eyes are immediately drawn to the brightest part of that object. The orange color has a lighter color value which creates a strong visual distinction when placed on a darker background, thus creating a high contrast. The orange and dark blue colors also happen to be two complementary colors. Complementary colors are greatly different from one another because they are opposite from each other on the color wheel. When placed next to each other, they can create a strong contrast between the two. Using complementary colors together can be a good way of creating emphasis. In practice this means placing colored objects on a neutral background such as gray or another lighter color. In visual design, the term visual weight is used to describe how one object stands out from the surrounding objects. As we covered earlier, larger objects draw more attention than smaller objects so in this case we could say that the larger object has more visual weight.

[08:03] Color also carries this visual weight property. For example, which of these two circles appears heavier? The vibrant orange certainly stands out more than the light blue, thus the orange circle has more visual weight. Since the two circles are similar in size and there aren't enough other objects on the screen for proximity to come into play, we can say that the orange circle has more visual weight purely based on color. Let's look at some higher fidelity examples. So here we have two popups. Looking at the left popup, the buttons have the same size and color. Because they have equal weight, there really isn't a priority to them. In other words, a user really wouldn't know which button is the primary action and which is the secondary action at a glance. Now if we look at the popup on the right, the difference in color makes one of those buttons stand out. So a user could figure out, again at a glance, which is the primary action. For our key points, color is useful to convey emphasis on an object. On the other hand, overusing a color can downplay objects.

[09:05] And be mindful of contrasting colors as they can be very useful when trying to call attention to certain areas of the screen. In this lesson, we've learned about the various visual properties to use when creating a visual hierarchy. Establishing a clear visual hierarchy takes a thoughtful approach through the combination of common visual properties like size, proximity and color. A well-structured screen will be easy to use and go unnoticed. However, a bad one will certainly cause much confusion and difficulty for your users.